<template>
	<view class="container">
		<view class="content">
			<uni-calendar :insert="true" :selected='selected' 
			:showMonth="false" :range="true" :selectPre="false"
			:preDate="false"
				@monthSwitch="monthSwitch" @change="change">
			</uni-calendar>
		</view>
		<view class="qingjia" @click="qingjia">
			请假
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popup_content">
				<view class="title">
					提示
				</view>
				<view class="tip_content">
					<view class="tip_top">
						您已经选择了
					</view>
					<view class="tip_top">
						{{start_date}}至{{end_date}}请假！
					</view>
				</view>
				<view class="btn_container">
					<view class="cancel btn" @click="cancel">
						取消
					</view>
					<view class="sure btn" @click="sure">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			let date = new Date();
			let year = date.getFullYear(); //获取完整的年份(4位)
			let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			let day = date.getDate(); //获取当前日(1-31)
			return {
				selected: [],
				token: "",
				sourceSelected: [],
				goods_id: '',
				start_date: '',
				end_date: '',
				currentDate:year+(month>9?month:'0'+month),
			}
		},
		onLoad: function(option) {
			this.goods_id = option.goods_id;
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData(this.currentDate);
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/index'
					});
				}
			});
		},
		methods: {
			qingjia() {
				if (this.start_date) {
					this.$refs.popup.open('center');
				} else {
					uni.showToast({
						title: '请选择请假时间！',
						icon: 'none'
					})
				}
			},
			sure() {
				this.$refs.popup.close();
				let param = {
					"token": this.token,
					"goods_id": this.goods_id,
					"start_date": this.start_date,
					"end_date": this.end_date
				}
				this.$request('/api/wxapp/v2/mine/grade/leave', param)
					.then(res => {
						if(res.code===1){
							uni.showToast({
								title: '请假操作成功！',
								icon: 'success'
							})
							this.getData(this.currentDate);
						}else{
							uni.showToast({
								title: '请假操作失败！',
								icon: 'error'
							})
						}
					})
			},
			cancel() {
				this.$refs.popup.close();
			},
			monthSwitch(date) {
				console.log(date)
				let dateParam = date.year + (date.month>9?date.month:'0'+date.month);
				this.currentDate = dateParam;
				this.getData(dateParam);
			},
			change(e) {
				this.selected = [];
				console.log(e.range)
				if (e.range && e.range.data && e.range.data.length > 0) {
					if(this.dateCompare(e.range.before, e.range.after)){
						this.start_date = e.range.before;
						this.end_date = e.range.after;
					}else{
						this.start_date = e.range.after;
						this.end_date = e.range.before;
					}
				} else {
					if (e.range.before) {
						this.start_date = e.range.before;
						this.end_date = e.range.before;
					} else {
						this.start_date = e.fulldate;
						this.end_date = e.fulldate;
					}
				}
			},
			/**
			 * 比较时间大小
			 */
			dateCompare(startDate, endDate) {
				// 计算截止时间
				startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
				// 计算详细项的截止时间
				endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
				if (startDate < endDate) {
					return true
				} else {
					return false
				}
			},
			getData(date) {
				let param = {
					"token": this.token,
					"goods_id":this.goods_id
				}
				if (date) {
					param.date = date;
				}
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/index/myLeaveRecord`,
					data: param,
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.selected = res.data.data;
							this.sourceSelected = res.data.data;
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/index'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #F9F9FB;
		overflow: hidden;

		.content {
			width: 670rpx;
			margin: 40rpx auto;
		}
	}

	.qingjia {
		width: 670rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 48rpx;
		background-color: #85BFFF;
		margin: 74px auto;
	}

	.popup_content {
		width: 674rpx;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.title {
			height: 18px;
			font-size: 18px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 700;
			color: #333333;
			line-height: 27px;
			letter-spacing: 2px;
			text-align: center;
			margin-top: 30rpx;
		}

		.tip_content {
			font-size: 30rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			color: #666666;
			line-height: 44rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.btn_container {
			width: 600rpx;
			margin: 70rpx auto 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 236rpx;
				height: 64rpx;
				font-size: 32rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
				text-align: center;
			}

			.sure {
				color: #FFFFFF;
				background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
				box-shadow: 0rpx 0rpx 30rpx 5rpx #9BDFB5;
			}

			.cancel {
				color: #309786;
				background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
			}
		}
	}
</style>
